<template>
	<div class="customInput">
		<p class="title-list">
			<span class="title"
			v-for="(item, index) in prop.field"
			:class="{ valuable: item.value, empty: item.isEmpty && item.required }"
			:key="index">{{ item.required ? item.name : item.name + '（选填）' }}</span>
		</p>
		<div class="input-box" v-if="prop.type === 'input'">
			<div class="left-box">
				<input
				:readonly="prop.isReadonly"
				type="text" :value="inputValue" 
				:placeholder="prop.placeholder"
				@blur="inputBlur"
				/>
			</div>
			<div v-if="prop.isReadonly" class="right-box">
				<van-icon name="arrow" />
			</div>
		</div>
		<div class="tag-box" v-else-if="prop.type === 'tag'">
			<div class="tag-list">
				<span class="tag" v-for="(item, index) in prop.tags"
				:class="{ active: item.active }"
				@click.stop="selectTag(item)"
				>{{ item.name }}</span>
			</div>
			<div v-if="isVisible">
				<input class="money" type="number"
					placeholder="输入抵押金额 "
					@blur="inputBlur" />
				<span>万元</span>
			</div>
		</div>
		<div class="text-box" v-else-if="prop.type === 'text'">
			<textarea :style="{height: height + 'px'}"
				:readonly="prop.isReadonly"
				:maxlength="maxlength" 
				:placeholder="prop.placeholder"
				@input="valueChangeArea"
				@blur="inputBlur"
			>
			</textarea>
		</div>
		<div class="van-hairline--bottom"></div>
	</div>
</template>

<script>
export default {
	props: {
		prop: {
			type: Object,
			required: true
		}
	},
	data() {
		let currentValue =  this.prop.field.find(item => item.active)
		// let curentTag = this.prop.tags.find(item => item.function)
		return {
			// curentTag,
			isVisible: false,
			maxlength: 200,
			height: 24,
			currentValue
		}
	},
	computed: {
		inputValue() {
			let bool = this.prop.field.some(item => item.value)
			if (!bool) return ''
			let values = []
			this.prop.field.forEach(item => {
				if (item.value){
					values.push(item.value)
				} else {
					values.push('请输入')
				}
			})
			return values.join(' / ')
		}
	},
	methods: {
		handleClick() {
			// console.log(this.prop.event)
			// this.$emit(this.prop.event)
		},
		inputBlur() {
			if (!this.prop.event && !this.prop.isReadonly) {
				let str = this.prop.spare || 'value'
				let ev = event || window.event
				this.currentValue[str] = ev.target.value
				this.currentValue.isEmpty = !this.currentValue[str]
				this.$nextTick(() => {
          window.scroll(0, 0)
          this.define = true
        })
			}
		},
		valueChangeArea() {
			let ev = event || window.event
			let scrollHeight = ev.target.scrollHeight
			if (this.height <= 240 && this.height !== scrollHeight ) {
				this.height = scrollHeight
			}
		},
		showInput(item) {
			this.isVisible = true
			this.$nextTick(() => {
				this.$el.getElementsByClassName("money")[0].focus()
			})
		},
		hideInput(item) {
			this.isVisible = false
			let str = this.prop.spare || 'value'
			this.currentValue[str] = ''
			this.currentValue.isEmpty = false
		},
		selectTag(item) {
			let { selectNumber } = this.prop
			// 多选框操作情况
			if (selectNumber > 1 ) {
				if (item.active) {
					item.active = false
				} else {
					let array = this.prop.tags.filter(list => list.active)
					if (array.length >= selectNumber) return false
					item.active = !item.active
				}
			} else {
				// 单选框情况
				if (item.active) return false
				this.prop.tags.forEach(list => {
					list.active = false
				})
				item.active = !item.active
				item.function && this[item.function](item)
			}
			let selects = []
			// 获取选中的值
			this.prop.tags.forEach(item => {
				if (item.active) {
					selects.push(item.name)
				}
			})
			this.prop.field.forEach(list => {
				list.value = selects.join("/")
			})
		}
	}
}
</script>

<style lang="less" scoped>

@color-gray: #9CA5B5;
@color-red: #EA4D2E;
@color-block: #13284D;   

.customInput {
	// height: 84px;
	.title-list {
		height: 44px;
		line-height: 20px;
		padding: 16px 0 8px;
		font-size: 14px;
		.title {
			color: @color-block;
			&::before {
				content: ' / ';
				color: @color-block;
			}
			&:first-child::before {
				content: '';
			}
		}
		.valuable {
			color: @color-gray;
			&::before {
				color: @color-gray;
			}
		}
		.empty {
			color: @color-red;
		}
	}

	.input-box {
		width: 100%;
		height: 24px;
		display: flex;
		font-size: 16px;
		margin-bottom: 16px;
		color: @color-block;
		.left-box {
			flex: 1;
			input {
				border: 0px;
				width: 100%;
				padding-left: 0;
				padding-right: 0;
				text-align: left;
			}
		}
		.right-box {
			flex-basis: 30px;
			align-self: center;
			text-align: right;
		}
	}

	.tag-box {
		font-size: 14px;
		margin-bottom: 8px;
		.tag {
			width: 72px;
			height: 32px;
			margin-right: 8px;
			margin-bottom: 8px;
			line-height: 32px;
			text-align: center;
			display: inline-block;
			overflow: hidden;
			color: #40516F;
			background: #F2F5F9;
		}
		.active {
			color: #fff;
			background: #007AE6;
		}
		.money {
			width: 100px;
			border: 0;
			height: 24px;
		}
	}

	.text-box {
		font-size: 14px;
		margin-bottom: 16px;
		textarea {
			width: 100%;
			line-height: 24px;
			border: 0;
			resize:none;
		}
	}

	.van-hairline--bottom::after {
    	border-color: #D2D8DD;
	}
}

</style>